<template>
  <div class="w_editor">
    <!-- 富文本编辑器 -->
    <div :id="id"></div>
  </div>
</template>

<script>
import { upLoadFile } from "@/api/common";
import E from 'wangeditor'

export default {
  name: 'WEditor',
  props: {
    // 默认值
    defaultText: { type: String, default: '' },
    // 默认ID
    id: { type: String, default: 'w_view'},
     // 富文本更新的值
     richText: { type: String, default: '' }
  },
  data () {
    return {
      // 编辑器实例
      editor: null,
      // 富文本菜单选项配置
      menuItem: [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'strikeThrough', // 删除线
        'underline', // 下划线
        'indent', // 缩进
        'table', // 表格
        'lineHeight', // 行高
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'emoticon', // 表情
        // 'quote', // 引用
        'link', // 插入链接
        'list', // 列表
        // 'code', // 插入代码
        'justify', // 对齐方式
        // 'video', // 插入视频
        'image', // 插入图片
        'undo', // 撤销
        'redo' // 恢复
        // 'fullscreen' // 全屏
      ]
    }
  },
  watch: {
    // 监听默认值
    defaultText (nv, ov) {
      if (nv != '') {
        this.editor.txt.html(nv)
        this.$emit('update:rich-text', nv)
      }
    }
  },
  mounted () {
    this.initEditor()
  },
  methods: {
    // 初始化编辑器
    initEditor () {
      // 获取编辑器dom节点
      const editor = new E(`#${this.id}`)
      // 配置编辑器
      editor.config.showLinkImg = false /* 隐藏插入网络图片的功能 */
      editor.config.onchangeTimeout = 400 /* 配置触发 onchange 的时间频率，默认为 200ms */
      editor.config.uploadImgMaxLength = 1 /* 限制一次最多能传几张图片 */
      editor.config.showFullScreen = false /* 配置全屏功能按钮是否展示 */
      editor.config.menus = [...this.menuItem] /* 自定义系统菜单 */
      // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
      editor.config.customAlert = (err) => {
        this.$Message.error(err)
      }
      // 监控变化，同步更新数据
      editor.config.onchange = (newHtml) => {
        // 异步更新组件富文本值的变化
        this.$emit('update:rich-text', newHtml)
      }
      // 自定义上传图片
      editor.config.customUploadImg = (resultFiles, insertImgFn) => {
        /**
         * resultFiles：图片上传文件流
         * insertImgFn：插入图片到富文本
         * 返回结果为生成的图片URL地址
         *  通过resultFiles上传给后端拿到返回的地址 src ,然后插入富文本 insertImgFn（src）,以下示例拿到的在线地址
         * */
        const formData = new FormData();
        formData.append("file", resultFiles[0]);
        upLoadFile(formData).then((res) => {
          if (res.code === 200) {
            this.$Message.success('上传成功')
            insertImgFn(res.result)
          } else {
            this.$Message.error('图片上传失败，请重试！')
            insertImgFn()
          }
        })
      }
      // 创建编辑器
      editor.create()
      this.editor = editor
    }
  },
  beforeDestroy () {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  }
}
</script>
<style lang="scss">
.w_editor {
  text-align: left;
}
.w-e-toolbar {
  z-index: 601 !important;
}
.w-e-text-container {
  z-index: 600 !important;
}
</style>
